<script>
/**
 * 标头
 */
import useNavInfoStore from "@/stores/nav";
import useRouterNameInfoStore from "@/stores/router-name";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",

  setup(){
    const navInfoStore = useNavInfoStore();
    const routerNameInfoStore = useRouterNameInfoStore();
    return{
      navInfoStore,
      routerNameInfoStore,
    }
  },

  data(){
    return{
      // 头像url
      userUrl:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    }
  },

  methods:{
    errorHandler:function (){
      return true
    },
    // 返回Home页
    goToHome(){
      this.navInfoStore.setSelect(this.navInfoStore.defaultId);
      this.$router.push('/');
    }
  },
}
</script>

<template>
  <div  class="m-head">
    <!--  bilibili手机版头部区域  -->
    <div class="top-title">
      <!--  页面logo  -->
      <div class="left-bilibili" @click="goToHome">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-bilibili-copy"></use>
        </svg>
      </div>

      <div class="right">
        <!--  搜索  -->
        <router-link class="right-search" :to="{name: routerNameInfoStore.search}">
          <svg class="icon" aria-hidden="true" style="color: #ccc">
            <use xlink:href="#icon-sousuo"></use>
          </svg>
        </router-link>
        <!--  用户头像  -->
        <div class="right-avatar">
          <router-link :to="{name: routerNameInfoStore.userSpace}">
            <el-avatar :src="userUrl" class="right-avatar-img" @error="errorHandler">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tupiancuowu"></use>
              </svg>
            </el-avatar>
          </router-link>
        </div>

        <!--  下载App  -->
        <div class="right-launch">
            <router-link :to="{name: routerNameInfoStore.download}">
              <div class="right-launch-img">下载 App</div>
            </router-link>
        </div>
      </div>
    </div>

    <!--  展示选中的路由界面  -->
    <div style="overflow: auto">
      <router-view></router-view>
    </div>
  </div>

</template>

<style scoped>
.m-head{
  display: flex;
  flex-direction: column;
  height: 100vmax;
}

.top-title{
  padding: 0 3.2vmin 0 4.8vmin;
  height: 11.73333vmin;
  display: block;
  line-height: 11.73333vmin;
  position: relative;
}

.left-bilibili{
  margin-top: 1.86667vmin;
  display: inline-block;
  height: 8vmin;
  width: 17.6vmin;
}
.left-logo{
  display: inline-block;
  width: 100%;
  height: 100%;
}
.icon{
  width: 100%;
  height: 100%;
}

.right{
  display: flex;
  align-items: center;
  height: 11.73333vmin;
  float: right;
  line-height: 6.4vmin;
}
.right-search{
  display: block;
  margin-right: 5.86667vmin;
  width: 5.86667vmin;
  height: 5.86667vmin;
}
.right-avatar{
  width: 6.4vmin;
  height: 6.4vmin;
  margin-right: 3.2vmin;
}
.right-avatar-img{
  width: 100%;
  height: 100%;
}
.right-launch{
  width: 19.2vmin;
  height: 6.4vmin;
  margin-left: 2.13333vmin;
}
.right-launch-img{
  font-size: 3.2vmin;
  border-radius: 1.06667vmin;
  background: #f69;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
</style>